import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, message, Button, Upload, Modal, Icon, Col, Row } from 'antd';
import styles from '../style.less';
import GridContent from '@/components/PageHeaderWrapper/GridContent';


@connect((settings) => ({

}))
class ImageSetting extends PureComponent {
  state = {
    loading: false,
    fileList: [],
    imgUrl:'',
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'settings/getAdvertisePicture',
      payload : {
        type : "big"
      },
      callback: (res)=>{
        if(res!==undefined&&res!==""){
          this.setState({
            imgUrl: `http://localhost:8080/image/${res}`,
            fileList: [{
              uid: '1',
              name: res,
              status: 'done',
              url: `http://localhost:8080/image/${res}`
            }]
        })
        }
      }
    });
  }

  beforeUpload = (file) => {
    const isJPG = file.type === 'image/jpeg';
    if (!isJPG) {
      message.error('You can only upload JPG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJPG && isLt2M;
  }

  handleChange = (info) => {
    console.log(info)
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      this.setState({
        imgUrl: `http://localhost:8080/image/${info.file.response.data}`,
        loading: false,
      });
    }
  }

  handleAdvertiseBigFileListRemove = (e) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'settings/deleteAdvertisePicture',
      payload: {
        type: "big"
      }
    })
  }


  render() {
    const { previewVisible, previewImage, fileList, imgUrl } = this.state;

    const uploadButton = (
      <div>
        <Icon type={this.state.loading ? 'loading' : 'plus'} />
        <div className="ant-upload-text">Upload</div>
      </div>
    );

    return (
      <GridContent>
        <Card title="活动宣传图" className={styles.card}>
          <Row gutter={24}>
            <Col lg={24} md={24}>
              <h3>第一步：上传宣传大图</h3>
              <Upload
                action="/api/competition/imageUpload"
                name="advertiseBig"
                listType="picture-card"
                // fileList={fileList}
                // className="avatar-uploader"
                showUploadList={false}
                onChange={this.handleChange}
                // onRemove={this.handleAdvertiseBigFileListRemove}
                // beforeUpload={this.beforeUpload}
              >
                {imgUrl ? <img style={{height:`50%`}} src={imgUrl} alt="advertise" /> : uploadButton}
              </Upload>
            </Col>
          </Row>
        </Card>
      </GridContent>
    );
  }
}

export default ImageSetting;
